<template>
  <div class="box">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'
export default {
  name: 'sdxzq',
  components: {
    HelloWorld
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
// 第一种写法
.box {
  :deep() {
    .msg {
      text-decoration: underline;
      font-size: 30px;
      color: red;
    }
  }
}

// 第二种写法
// .box {
//   ::v-deep {
//     .msg {
//       text-decoration: underline;
//       font-size: 30px;
//       color: red;
//     }
//   }
// }
</style>
